<template>
  <div class="XTable">
    <el-table
      v-loading="isLoading"
      :data="tableData"
      :border="isBorder"
      size="large"
      style="width: 100%"
      :height="height"
      :lazy="lazy"
      :row-key="rowKey"
      :row-class-name="rowClassName"
      @clearSelection="clearSelection"
      :default-expand-all="defaultExpandAll"
      :tree-props="treeProps"
      @selection-change="handleSelectionChange"
      :default-sort="defaultSort"
      @sort-change="sortChange"
    >
      <el-table-column v-if="isShowExpand" type="expand">
        <template #default="scope">
          <slot name="expand" :row="scope.row"></slot>
        </template>
      </el-table-column>
      <el-table-column
        v-if="isShowCheckBox"
        type="selection"
        width="55"
        align="center"
        :fixed="firstIsFixed"
      />
      <el-table-column
        width="68"
        align="center"
        v-if="isShowRadio"
        :fixed="firstIsFixed"
      >
        <template #default="scope">
          <el-radio
            :value="radioValue"
            :label="scope.row.id"
            @change="change(scope.row)"
            >{{ "" }}</el-radio
          >
        </template>
      </el-table-column>
      <el-table-column
        v-if="isShowIndex"
        label="序号"
        type="index"
        width="55"
        :fixed="firstIsFixed"
      />

      <!--  width="500" -->
      <template v-for="propItem in propList" :key="propItem.prop">
        <!-- show-overflow-tooltip -->
        <el-table-column
          :show-overflow-tooltip="
            propItem.hasOwnProperty('showOverflowTooltip')
              ? propItem['showOverflowTooltip']
              : true
          "
          v-bind="propItem"
          :prop="typeof propItem.prop === 'function' ? '' : propItem.prop"
          align="center"
        >
          <template v-if="typeof propItem.prop === 'function'" #default="scope">
            <!-- 传入函数 -->
            <span>
              {{ propItem.prop(scope.row) }}
            </span>
          </template>
          <!--  -->
          <template v-else-if="propItem.slotName" #default="scope">
            <slot
              :name="propItem.slotName"
              :row="scope.row"
              :propItem="propItem"
              :index="scope.$index"
            >
              {{ scope.row[propItem.prop] }}
            </slot>
          </template>
          <!-- <template v-else-if="typeof propItem.prop === 'function'">
          <span>
            {{ propItem.prop(propItem.prop, scope.row) }}
          </span>
        </template> -->
        </el-table-column>
      </template>
      <!-- <el-table-column
        v-for="(item, index) in propList"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :align="item.align || 'center'"
      >
      </el-table-column> -->
      <!-- <el-table-column prop="name" label="姓名" width="180">
        <template :slot-scope="{ row }">
          <slot :name=""></slot>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column> -->
    </el-table>
  </div>
</template>

<script>
export default {
  name: "XTable",
  props: {
    firstIsFixed: {
      type: Boolean,
      default: false,
    },
    isBorder: {
      type: Boolean,
      default: true,
    },
    defaultSort: {
      type: Object,
      default: () => ({}),
    },
    isLoading: {
      type: Boolean,
      default: false,
    },
    propList: {
      type: Array,
      required: true,
    },
    tableData: {
      type: Array,
      default: () => [],
    },
    border: {
      type: Boolean,
      default: false,
    },
    stripe: {
      type: Boolean,
      default: false,
    },
    rowKey: {
      type: String,
      default: "id",
    },
    lazy: {
      type: Boolean,
      default: false,
    },
    isShowCheckBox: {
      type: Boolean,
      default: false,
    },
    isShowRadio: {
      type: Boolean,
      default: false,
    },
    isShowIndex: {
      type: Boolean,
      default: false,
    },
    isShowExpand: {
      type: Boolean,
      default: false,
    },
    defaultExpandAll: {
      type: Boolean,
      default: false,
    },
    rowClassName: {
      type: Function,
    },
    height: {
      type: [String, Number],
    },
    treeProps: {
      type: Object,
      default: () => ({ children: "children", hasChildren: "hasChildren" }),
    },
    radioKey: {
      type: String,
      default: "id",
    },
    radioValue: {
      type: [String, Number],
      default: "",
    },
    radioCheckObj: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      // radioId: null,
      selection: {}, //选中的列
    };
  },
  methods: {
    sortChange(row) {
      // console.log(row, col);
      this.$emit("sort-change", row);
    },
    handleSelectionChange(val) {
      if (this.isShowCheckBox) {
        this.$emit("selection-change", val);
      }
    },
    change(row) {
      this.$emit("update:radioValue", row[this.radioKey]);
      this.$emit("update:radioCheckObj", row);
      // this.radioId = row.id;
      this.selection = row;
    },
    clearSelection() {
      this.$emit("clearSelection");
    },
    toggleRowSelection(row, selected) {
      this.$emit("toggleRowSelection", { row, selected });
    },
    toggleAllSelection() {
      this.$emit("toggleAllSelection");
    },
    clearSelection() {
      this.$emit("clearSelection");
    },
  },
};
</script>

<style lang="scss" scoped></style>
